﻿@model MyMVCWedMake.ViewsModel.SayViewModel

@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>

    <link rel="stylesheet" href="~/Content/bootstrap.min.css">
    <link rel="stylesheet" href="~/Content/Index.css">
    <!-- 网页icon头像 -->
    <link rel="shortcut icon" href="~/img/loginOk.png">

</head>

<body>
    <div id="container">

        <div class="row">
            <!-- 左布局 -->
            <div class="col">

            </div>
            <!-- 中间布局 -->
            <div class="col">
                <div id="sayMsgText">
                    @foreach (var msg in Model.MessageViewModels)
                    {
                        <div id="card" style="margin-top: 1rem;">
                            <div class="card border-secondary shadow-lg" style="width: 50rem;">
                                <div class="card-header">
                                    <h3>@msg.Content</h3>
                                    <footer class="blockquote-footer" style="margin-left: 40rem;">
                                        <cite class="font-weight-bold">@msg.PublishUser</cite>
                                    </footer>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group list-group-flush" id="@msg.Id">
                                        @foreach (var com in msg.CommentViewModels)
                                        {
                                        <li class="list-group-item commentContentBG">
                                            <blockquote class="blockquote mb-0">
                                                <p>@com.Content</p>

                                                <footer class="blockquote-footer" style="margin-left: 25rem;">
                                                    <cite class="font-weight-bold">@com.CommentUserName</cite>&nbsp;&nbsp;对
                                                    <cite class="font-weight-bold">@com.saysayUserName</cite>&nbsp;&nbsp;说
                                                </footer>
                                            </blockquote>
                                        </li>
                                        }
                                      
                                    </ul>
                                </div>
                                <!-- 评论按钮 -->
                                <div class="col-sm-2 sayComment">
                                    <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                            data-target="#sayComment" onclick="sayComment('@msg.Id')">
                                        评论
                                    </button>
                                </div>
                            </div>
                        </div>
                    }

                </div>
            </div>


            <!-- 右布局 -->
            <div class="col">
                <div class="card" style="width: 18rem;">
                    <img src="~/img/userHeadPortrait.jpg" class="card-img-top" alt="">
                    <div class="card-body">
                        <h5 class="card-title">个人简介</h5>
                        <p class="card-text">
                            Some quick example text to build on the card title and make up the bulk of the card's
                            content.
                        </p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" id="introductionColumn">用户：@Model.UserName</li>
                        <li class="list-group-item" id="introductionColumn">兴趣爱好：</li>
                        <li class="list-group-item" id="introductionColumn">特长语言：</li>
                    </ul>
                    <div class="card-body">
                        <!-- 发表说说按钮 -->
                        <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#saysay">发表说说</button>

                        <!-- 个人信息 -->
                        <a href="#" class="card-link" style="margin: 1rem;">个人信息</a>
                        <!-- 注销 -->
                        <a href="#" onclick="logOff()" class="card-link" style="margin: 1rem;">注销</a>
                    </div>
                </div>



            </div>


        </div>

    </div>



    <!-- 发表说说按钮 -->
    <!-- 模态框 -->
    <div class="modal fade" id="saysay">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">发表说说</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="" method="POST">
                        <div class="form-group">
                            <textarea class="form-control" rows="3" placeholder="发表点啥呀..." style="width: 29rem;"
                                      id="saysayMsg"></textarea>
                        </div>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <input type="button" class="btn btn-success" value="发表说说" data-dismiss="modal" onclick="saysay()">
                    <input type="button" class="btn btn-secondary" data-dismiss="modal" value="取消">
                </div>

            </div>
        </div>
    </div>


    <!-- 评论按钮 -->
    <!-- 模态框 -->
    <div class="modal fade" id="sayComment">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- 模态框头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">发表评论</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- 模态框主体 -->
                <div class="modal-body">
                    <form action="/comment" method="POST">
                        <div class="form-group">
                            <textarea class="form-control" rows="3" placeholder="说点啥呀..." style="width: 29rem;"
                                      id="sayCommentMsg"></textarea>
                        </div>
                    </form>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <input type="button" class="btn btn-success" value="发表评论" data-dismiss="modal" onclick="comment()">
                    <input type="button" class="btn btn-secondary" data-dismiss="modal" value="取消">
                </div>

            </div>
        </div>
    </div>


    </div>


    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>
    @*背景JS
    <script src="/statics/js/SpiderWeb.js"></script>*@
    <script>

    var currentMsgId = '';
    function sayComment(msgId) {
      currentMsgId = msgId;
    }

    // 注销按钮点击事件
    function logOff() {
      axios({
        method: 'post',
        url: '/logout'
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        var res = response.data;
        if (res.code === 200) {
          window.location.href = '/';
        }
      })
    }

    // 发表说说按钮点击事件
    function saysay() {
      axios({
        method: 'post',
        url: '/saysay',
        data: {
          saysayMsg: $("#saysayMsg").val(),
        }
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        var res = response.data;
        // console.log(res);
        // parent.location.reload();   // 发表说说后刷新全部页面（暂时），刷新全部页面在这不是很合适
        $("#saysayMsg").val('');  // 发表完后清空文本框
        if (res.code === 200) {
          var data = JSON.parse(res.data);
          console.log(data);
          var html = `
        <div id="card" style="margin-top: 1rem;">
          <div class="card border-secondary shadow-lg" style="width: 50rem;">
            <div class="card-header">
              <h3>${data.content}</h3>
              <footer class="blockquote-footer" style="margin-left: 40rem;">
                <cite class="font-weight-bold">{{username}}</cite>
              </footer>
            </div>
            <div class="card-body">
              <ul class="list-group list-group-flush" id="${data.id}">

              </ul>
            </div>
            <!-- 评论按钮 -->
            <div class="col-sm-2 sayComment"><button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                data-target="#sayComment" onclick="sayComment('${data.id}')">评论</button>
            </div>
          </div>
        </div>
        `

          $('#sayMsgText').prepend(html);
        }
      })
    }

    // 发表评论按钮点击事件
    function comment() {
      axios({
        method: 'post',
        url: '/comment',
        data: {
          saycommentMsg: $("#sayCommentMsg").val(),
          msgId: currentMsgId
        }
      }).then(function (response) {
        // axios工具下，服务器真正返回的数据在返回对象的data中
        var res = response.data;
        // console.log(res);
        // parent.location.reload();   //发表评论后刷新全部页面（暂时），刷新全部页面在这不是很合适
        $("#sayCommentMsg").val('');   // 发表完后清空文本框
        if (res.code === 200) {
          var data = res.data;
          // console.log(data);
          var html = `
                <li class="list-group-item commentContentBG">
                  <blockquote class="blockquote mb-0">
                    <p>${data.content}</p>

                    <footer class="blockquote-footer" style="margin-left: 25rem;">
                      <cite class="font-weight-bold">${data.fromUserName}</cite>&nbsp;&nbsp;对
                      <cite class="font-weight-bold">${data.toUserName}</cite>&nbsp;&nbsp;说
                    </footer>
                  </blockquote>
                </li>
        `
          $("#" + data.messageId).append(html);
        }
      })
    }
    </script>

    <!-- 鼠标点击特效  -->
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = new Array("(⌒▽⌒)", "(=・ω・=)", "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ( ￣□￣||)", "(▔□▔)/", "Σ(ﾟдﾟ;)", "(^・ω・^ )", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "(╯°口°)╯┴—┴", "🍕", "🍔", "🌭", "🥞", "🍳", "🍞", "🥐", "🍠", "🥙", "🍤", "🥩", "🍖", "🥂", "🥗", "🧀", "🍱", "🍝", "🐷", "❤", "🤣", "💕", "💖", "🌹", "💋", "🎂", "🎉", "🎃", "🎈", "🎀", "🎊", "🚗", "🎄", "❤", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "🍟", "🍗", "🍿", "江呆呆是个憨憨💕💟💌");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                    1500,
                    function () {
                        $i.remove();
                    });
            });
        });
    </script>
</body>


</html>